
import Taro, {Component} from '@tarojs/taro'
import {inject, observer} from '@tarojs/mobx'
import {View, Button, Picker, Input, Form} from '@tarojs/components'
import {
  navigateTo,
  banks,
  showToast,
  isBankCard,
  navigateBack
} from "../../utils/common";


import {IStoreProps} from '../../store/Stores'

import './bankAdd.scss'

interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class BankAdd extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    bankArr: banks,
    currentBankIndex: 0,
    cardName: '', // 银行卡姓名 ,
    cardNumber: '', // 银行卡号 ,
    bankName: '', // 银行名称 ,
  }


  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  changePicker(e) { this.setState({ currentBankIndex: e.detail.value }) }

  submit(e) {
    let { cardNumber, cardName } = e.detail.value
    let { currentBankIndex, bankArr } = this.state
    let bankName = bankArr[currentBankIndex]
    if(!cardName) { showToast('请填写持卡人姓名'); return }
    if(!cardNumber) { showToast('请填写银行卡号码'); return }
    if(!isBankCard(cardNumber)) { showToast('请填写正确的银行卡号码'); return }
    let { userStore } = this.props.stores
    userStore.saveUserCardAsync({
      form: {
        cardName,
        cardNumber,
        bankName
      },
      callback: () => {
        showToast('银行卡添加成功~')
        setTimeout(() => { navigateBack() }, 2000)
      }
    })
  }

  render() {
    let { bankArr, currentBankIndex } = this.state
    return (
      <View className='page-bg content-20'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='form-body'>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>持卡人</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='cardName' placeholderClass='placeholder-class' placeholder='请输入持卡人姓名'/>
              </View>
            </View>
            <View className='form-wrap__group'>
              <View className='form-wrap__title'>银行卡号</View>
              <View className='form-wrap__content'>
                <Input className='form-wrap__input' name='cardNumber' placeholderClass='placeholder-class' placeholder='请输入银行卡号'/>
              </View>
            </View>

            <View className='form-wrap__group'>
              <View className='form-wrap__title'>开户行</View>
              <View className='form-wrap__content'>
                <Picker mode='selector' className='form-wrap__selector' range={bankArr} onChange={this.changePicker.bind(this)}>
                  <View className='form-wrap__picker icon-link-theme'>{bankArr[currentBankIndex]}</View>
                </Picker>
              </View>
            </View>
          </View>
          <Button className='circular-submit' formType='submit'>确定添加</Button>
        </Form>
      </View>
    )
  }
}

export default BankAdd

